<template>
  <view class="flex flex-x-b flex-y-c" style="width: 100%">
    <view class="flex">
      <view class="image-box" :style="{ width: avaterSize + 'rpx', height: avaterSize + 'rpx' }">
        <image :src="userInfo.avatarUrl"></image>
      </view>
      <view class="flex flex-y flex-x-a ml-30" v-if="!onlyShowAvater">
        <view class="header color-333333 fs-30 bold">
          <slot name="name"> 
             <text>{{ userInfo.name }}</text>
          </slot>
        </view>
        <view class="footer fs-26 gray" v-if="!hiddenText">
          <slot name="text"> {{ userInfo.time }} </slot>
        </view>
        <view class="footer fs-26" >
          <slot name="vip" v-if="showVip && vipEndTime">{{vipEndTime}}</slot>
        </view>
      </view>
    </view>
    <view class="right">
      <slot name="right"></slot>
    </view>
  </view>
</template>

<script>
import { timestampToTime } from '../../pages/course/utils'
export default {
  props: {
    userInfo: {
      type: Object,
      defult: () => {}, // 头像地址，或其他信息
    },
    avaterSize: {
      type: Number,
      defult: 80,
    }, //设置头像的大小
    onlyShowAvater: {
      type: Boolean,
      default: false,
    }, //仅展示头像
    hiddenText: {
      type: Boolean,
      default: false,
    }, //隐藏footer文字内容
    showVip: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    vipEndTime() {
      if(!this.userInfo.vipEndTime) return ''
      return `到期时间：${timestampToTime(this.userInfo.vipEndTime,'y')}`
    }
  },
  methods: {
    // choose_image(url) {
    //   if (url) {
    //     uni.previewImage({
    //       urls: [url],
    //     });
    //   }
    // },
  },
};
</script>

<style lang="scss">
.image-box {
  width: 80rpx;
  height: 80rpx;
  border-radius: 80rpx;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }
}
.icon-bianzu11 {
  font-size: 36rpx;
  color: #eee151;
  margin-left: 10rpx;
}
</style>